<!--
 * relative     : \src\components\drawer.vue
 * Author       : 郭鹏超
 * Date         : 2024-10-24 17:53
 * LastEditors  : 郭鹏超
 * LastEditTime : 2025-02-20 13:59
 * Description  : 抽屉组件
 * CodeIterationRecord: 
 -->
<template>
  <el-drawer
    v-model="drawerOptions.showDrawer"
    :title="drawerOptions.drawerTitle"
    :direction="drawerOptions.drawerDirection"
    :size="drawerOptions.drawerSize"
    :class="footerClass"
    :destroy-on-close="true"
    :before-close="emits('before-close')"
    @open="emits('open')"
    @opened="emits('opened')"
    @close="emits('close')"
    @closed="emits('closed')"
    :append-to-body="true"
  >
    <slot name="drawerContent">
      <div class="wh-full">
        <slot name="default"></slot>
      </div>
    </slot>
    <template #footer>
      <slot name="footer"></slot>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
const { drawerOptions } = defineProps({
  drawerOptions: {
    type: Object as () => DrawerOptions,
    default: () => {
      return {
        showDrawer: false,
        drawerTitle: "",
        drawerDirection: "btt",
        drawerSize: "30%"
      } as DrawerOptions;
    }
  }
});
const footerClass = computed(() => (drawerOptions.hiddenFooter ? "sons-class-el-drawer__footer:hidden" : ""));
const emits = defineEmits(["open", "opened", "close", "closed", "before-close"]);
</script>
